<div class="text-center mb-4">
  <h1>Welcome to the Transloco Playground</h1>
  <a
    href="https://jsverse.gitbook.io/transloco/"
    class="btn btn-primary"
    target="_blank"
    rel="noopener"
  >
    <span>📖 Read the docs</span>
  </a>
</div>

<div class="flex justify-around">
  <div class="info-container">
    <h4>🎉 Explore Transloco's Capabilities!</h4>
    <p>
      This playground serves as a showcase of Transloco's powerful features and
      flexibility. Dive into real-world examples and see how it can elevate your
      localization workflows.
    </p>
  </div>

  <div class="info-container">
    <h4>📚 Looking for More?</h4>
    <p>
      For detailed guides, advanced topics, and setup instructions, head over to
      the
      <a
        href="https://jsverse.gitbook.io/transloco/"
        target="_blank"
        rel="noopener"
      >
        <span>official Transloco documentation</span>
      </a>
    </p>
  </div>

  <div class="info-container">
    <h4>🤿 Dive into the implementation</h4>
    <p>
      You can find the source code for this app in the
      <a
        href="https://github.com/jsverse/transloco/tree/master/apps/transloco-playground"
        target="_blank"
        rel="noopener"
      >
        <span>transloco repo</span>
      </a>
    </p>
  </div>
</div>

<div class="flex justify-around flex-wrap gap-2">
  <div>
    <h3 class="mb-6">Structural Directive</h3>
    <ul class="list-group structural">
      <ng-container *transloco="let t; currentLang as currentLang">
        <li class="list-group-item" data-cy="regular">
          <b>Regular: </b>{{ t('home') }}
        </li>
        <li class="list-group-item" data-cy="with-params">
          <b>With params: </b>{{ t('alert', { value: dynamic() }) }}
        </li>
        <li class="list-group-item" data-cy="with-translation-reuse">
          <b>With translation reuse: </b> {{ t('a.b.c') }}
        </li>
        <ng-container *transloco="let staticT; lang: 'en|static'">
          <li class="list-group-item" data-cy="static-lang-en">
            <b>Static lang 'en': </b> {{ staticT('home') }}
          </li>
        </ng-container>
        <li class="list-group-item" data-cy="current-lang">
          <b>Current Lang: </b>{{ currentLang }}
        </li>
      </ng-container>
    </ul>
  </div>
  <div>
    <h3 class="my-6">Directive</h3>
    <ul class="list-group">
      <li class="list-group-item" data-cy="d-regular">
        <b>Regular: </b><span transloco="home"></span>
      </li>
      <li
        class="list-group-item"
        (click)="changeParam()"
        data-cy="d-with-params"
      >
        <b>(click) With params: </b
        ><span
          transloco="alert"
          [translocoParams]="{ value: dynamic() }"
        ></span>
      </li>
      <li class="list-group-item" data-cy="d-with-translation-reuse">
        <b>With translation reuse: </b> <span transloco="a.b.c"></span>
      </li>
      <li class="list-group-item" (click)="changeKey()" data-cy="d-dynamic-key">
        <b>(click) Dynamic key: </b> <span [transloco]="key()"></span>
      </li>
      <li class="list-group-item" data-cy="d-static-lang-es">
        <b>Static lang 'es': </b
        ><span transloco="home" translocoLang="es|static"></span>
      </li>
    </ul>
  </div>
  <div>
    <h3 class="my-6">Pipe</h3>
    <ul class="list-group pipe">
      <li class="list-group-item" data-cy="p-regular">
        <b>Regular: </b>{{ 'home' | transloco }}
      </li>
      <li class="list-group-item" data-cy="p-with-params">
        <b>With params: </b>{{ 'alert' | transloco: { value: dynamic() } }}
      </li>
      <li class="list-group-item" (click)="changeKey()" data-cy="p-dynamic-key">
        <b>(click) Dynamic key: </b> <span> {{ key() | transloco }}</span>
      </li>
      <li class="list-group-item" data-cy="p-with-translation-reuse">
        <b>With translation reuse: </b> {{ 'a.b.c' | transloco }}
      </li>
      <li class="list-group-item" data-cy="p-static-lang-en">
        <b>Static lang 'en': </b>{{ 'home' | transloco: {} : 'en|static' }}
      </li>
    </ul>
  </div>
  <div>
    <h3 class="my-6">Signal</h3>
    <ul class="list-group">
      <li class="list-group-item" data-cy="s-regular">
        <b>Regular:</b> {{ transloco() }}
      </li>
      <li class="list-group-item" data-cy="s-object">
        <b>Object:</b> {{ translocoObject().title }}
      </li>
      <li
        class="list-group-item"
        data-cy="s-with-params"
        (click)="changeParam()"
      >
        <b>(click) Dynamic params:</b> {{ translocoParams() }}
      </li>
      <li class="list-group-item" (click)="changeKey()" data-cy="s-dynamic-key">
        <b>(click) Dynamic key: </b> {{ translocoKeys() }}
      </li>
    </ul>
  </div>
  <div>
    <h3 class="my-6">Translation in {{ '@for' }}</h3>
    <ul class="list-group">
      @for (key of translateList; track key; let index = $index) {
        <li class="list-group-item" data-cy="translation-loop">
          <b>Index {{ index + 1 }}:</b> {{ key | transloco }}
        </li>
      }
    </ul>
  </div>
</div>
